<template>
  <div class="ServiceHandle">
    <el-form :inline="true" ref="form" :model="form" label-width="80px">
      <div>
        <el-form-item label="客户" style="margin-left: -40px;">
          <el-input v-model="form.clientame"></el-input>
        </el-form-item>
        <el-form-item label="概要">
          <el-input v-model="form.summary"></el-input>
        </el-form-item>
        <el-form-item label="创建日期">
          <el-col :span="24">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.createTime" style="width: 100%;">
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button @click="pageshow" plain>搜索</el-button>
          <el-button @click="showAll" plain>显示全部</el-button>
        </el-form-item>
      </div>
    </el-form>
    <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" border style="width: 100%">
      <el-table-column prop="Number" label="编号" width="60" type="index"></el-table-column>
      <el-table-column prop="clientName" label="客户"></el-table-column>
      <el-table-column prop="summary" label="概要"></el-table-column>
      <el-table-column prop="serviceType" label="服务类型" :filters="opition1" :filter-method="filterTag"
        filter-placement="bottom-end"></el-table-column>
      <el-table-column prop="creatName" label="创建人"></el-table-column>
      <el-table-column prop="createTime" label="创建日期"></el-table-column>
      <el-table-column fixed="right" label="操作" width="60">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="show(scope.$index, scope.row)" class="el-icon-help">处理</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="服务处理" :visible.sync="addVisible" width="65%" :modal-append-to-body="false">
      <table id="tableshow" border="0" cols="20" rows="20">
        <tr>
          <th>编号</th>
          <th>{{index+1}}</th>
          <th>服务类型</th>
          <th>{{resdata.serviceType}}</th>
        </tr>
        <tr>
          <th>概要</th>
          <th>{{resdata.summary}}</th>
          <th></th>
          <th></th>
        </tr>
        <tr>
          <th>客户</th>
          <th>{{resdata.clientName}}</th>
          <th>状态</th>
          <th>{{resdata.stateName}}</th>
        </tr>
        <tr>
          <th>服务请求</th>
          <th>{{resdata.requestService}}</th>
          <th></th>
          <th></th>
        </tr>
        <tr>
          <th>创建人</th>
          <th>{{resdata.creatName}}</th>
          <th>创建时间</th>
          <th>{{resdata.createTime}}</th>
        </tr>
        <tr>
          <th>分配给</th>
          <th>{{resdata.assignedName}}</th>
          <th>分配时间</th>
          <th>{{resdata.assignedTime}}</th>
        </tr>
        <tr>
          <th>服务处理</th>
          <th>
            <el-input v-model="resdata.operatorContent" placeholder="请输入"></el-input>
          </th>
          <th></th>
          <th></th>
        </tr>
        <tr>
          <th>处理人</th>
          <th>{{resdata.handlerName}}</th>
          <th>处理时间</th>
          <th>{{resdata.handlerTime}}</th>
        </tr>
      </table>
      <table style="text-align: center;padding-top: 40px;position: relative;margin-left: 43%;">
        <tr>
          <th colspan="2">
            <el-button type="primary" @click="save()" plain>保存</el-button>
          </th>
          <th colspan="2">
            <el-button type="primary" @click="show()" plain>返回</el-button>
          </th>
        </tr>
      </table>
    </el-dialog>
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"></el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: "ServiceHandle",
    props: ["msg"],
    data() {
      return {
        juese: '',
        currentPage: 1, //初始页
        pagesize: 5, //    每页的数据
        addVisible: false,
        opition1: [],
        options: [
          {
            value: 1,
            label: "☆"
          },
          {
            value: 2,
            label: "☆☆"
          },
          {
            value: 3,
            label: "☆☆☆"
          },
          {
            value: 4,
            label: "☆☆☆☆"
          },
          {
            value: 5,
            label: "☆☆☆☆☆"
          }
        ],
        form: {
          clientame: "",
          summary: "",
          servesType: "",
          createTime: "",
          serveState: ""
        },
        tableData: [],
        serveType: [],
        serveState: [],
        resdata: [],
        index: "",
        processResult: "",
        state: ""
      };
    },
    mounted() {
      this.userId = localStorage.getItem("userId");
      this.pageshow();
    },
    created() {
      let nowname = localStorage.getItem("reloname");
      this.juese = nowname;
    },
    methods: {
      filterTag(value, row) {
        return row.serviceType === value;
      },
      filterHandler(value, row, column) {
        const property = column["property"];
        return row[property] === value;
      },
      showAll() {
        this.form = {};
        this.pageshow();
      },
      pageshow() {
        this.$http
          .get("/serveList/serviceHandle", {
            params: {
              name: this.form.clientame,
              summry: this.form.summary,
              createTime: this.form.createTime,
              userId: this.userId,
              from: 2
            }
          })
          .then(response => {
            this.tableData = response.data.data;
          })
      },
      show(index, row) {
        console.log(row, index);
        this.processResult = "";
        if (row != undefined) {
          this.index = index;
          this.resdata = row;
        }
        if (this.addVisible == false) {
          this.addVisible = true;
        } else {
          this.addVisible = false;
        }
      },
      save() {
        if (this.resdata.operatorContent === null || this.resdata.operatorContent === '') {
          this.$notify.error({
            title: "服务处理不能为空，故无法保存",
            message: "😭",
            type: "空空"
          });
          return;
        }
        this.resdata.state = '3';
        this.resdata.handlerId = localStorage.getItem("userId") || '';
        this.resdata.handlerTime = this.getNowFormatDate();
        this.$http
          .put("/serveList/serviceUpdate", this.resdata)
          .then(response => {
            if (response.data.code == 0) {
              this.pageshow();
              this.addVisible = false;
              this.$notify({
                title: response.data.msg,
                message: "😍",
                type: "success"
              });
            } else {
              this.$notify.error({
                title: response.data.msg,
                message: "😭",
                type: 'error'
              });
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      }, handleSizeChange(size) {
        this.pagesize = size;
      },
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage;
      },
      getNowFormatDate() {//获取当前时间
        var date = new Date();
        var seperator1 = "-";
        var seperator2 = ":";
        var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        var strDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate;
        return currentdate;
      }
    },
  };
</script>

<style scoped>
  #tableshow tr th {
    width: 800px;
    height: 40px;
    border-radius: 3px;
  }

  #tableshow tr th:nth-child(1) {
    background: #d3dce6;
    font-family: "微软雅黑";
  }

  #tableshow tr th:nth-child(3) {
    background: #d3dce6;
  }

  body {
    font-family: Arial;
    font-size: 14px;
    line-height: 180%;
    padding-top: 20px;
  }

  /*总控制，可忽略此行*/
  #tableshow {
    border-top: 1pt solid #c1dad7;
    border-left: 1pt solid #c1dad7;
    margin: 0 auto;
  }

  td {
    padding: 5px 10px;
    text-align: center;
    border-right: 1pt solid #c1dad7;
    border-bottom: 1pt solid #c1dad7;
  }

  /*鼠标悬停后表格背景颜色*/

  #tableshow {
    border-collapse: collapse;
    font-size: 18px;
  }
</style>